<div class="settings-page">
    <h1>{{'Settings.AddressBook.Title' | translate}}</h1>
    <p class="description">{{'Settings.AddressBook.Description' | translate}}</p>

    <div *ngIf="!isEmptyList" class="add-contact-button">
        <button class="tron-default-button" (click)="addEntry()" mat-stroked-button="">
            {{'Settings.AddressBook.AddContact' | translate}}
        </button>
    </div>

    <div class="zero-state" *ngIf="isEmptyList">
        <div class="zero-state-icon"></div>
        <div class="zero-state-heading">
            {{'Settings.AddressBook.NoContacts' | translate}}
        </div>
        <div class="zero-state-description">
            {{'Settings.AddressBook.NoContactDescription' | translate}}
        </div>

        <button mat-stroked-button (click)="addEntry()" class="tron-default-button">
            {{'Settings.AddressBook.AddContact' | translate}}
        </button>
    </div>

    <div class="search-filter" *ngIf="!isEmptyList">
        <mat-form-field floatLabel="never" class="filter-search">
            <input matInput [placeholder]="'Settings.AddressBook.SearchPlaceholder' | translate" (input)="getItems($event)">
            <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>
    </div>

    <div class="empty-search-section" *ngIf="!isEmptyList && !filteredAddressbook.length">
        {{ 'NoSearchResult' | translate }}
    </div>

    <mat-list class="address-book-items" *ngIf="!isEmptyList">
        <mat-list-item *ngFor="let entry of filteredAddressbook | orderBy : ['name']">
            <gravatar mat-list-avatar [name]="entry.name" [height]="40" [width]="40" [email]="entry.email"></gravatar>
            <h4 mat-line>{{entry.name}}</h4>
            <p mat-line [copy-to-clipboard]="entry.address"> {{entry.address}} </p>
            <span fxFlex=""></span>
            <button class="address-icon" mat-icon-button (click)="editEntry(entry)">
                <mat-icon>edit</mat-icon>
            </button>

            <button class="address-icon" mat-icon-button (click)="deleteEntry(entry.address)">
                <mat-icon>delete</mat-icon>
            </button>
        </mat-list-item>
    </mat-list>
</div>
